<template>
    <div class="fal">
        <!-- 电脑端 -->
        <div v-if="screenWidth > 400" class="common-layout">
            <!-- <div class="common-layout"> -->
            <el-container>
                <el-header>
                    <div class="head f f-a-c f-j-b">
                        <div class="lef f f-a-c">
                            <img src="/src/status/logo.png" class="login" alt="">
                            <div class="title">H.S.国际问题研究平台</div>
                        </div>
                        <!-- <img src="/src/status/avart.png" class="avart" alt=""> -->
                        <!-- ============================================================================= -->
                        <el-popover trigger="hover" placement="top" :width="150">
                            <div class="userInfo">用户名用户名用户名</div>
                            <div @click="xiugaiPass" class="ChangePassword">修改密码</div>
                            <div @click="useHolp" class="ChangePassword">使用帮助</div>
                            <div @click="tuideng" class="ChangePassword">退出登录</div>
                            <template #reference>
                                <img src="/src/status/avart.png" class="avart" alt="">
                            </template>
                        </el-popover>
                        <!-- ============================================================================= -->
                    </div>
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <left />
                    </el-aside>
                    <el-main class="mine">
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
        <!-- 手机端 -->
        <div v-else>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <!-- 这个是修改密码 -->
        <CountDetile ref="Detil" item="{id:1}" />
        <!-- 这个是使用帮助 -->
        <UseHelp ref="Holp" />
    </div>
</template>

<script setup>
import CountDetile from '../components/CountDetile/index.vue';
import UseHelp from '../components/UseHelp/index.vue';
import router from '../router/index';
import left from "../navBar/left.vue";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
// 退出登录
const tuideng = () => {
    ElMessageBox.confirm(
        '确认退出登陆吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage({
            type: 'success',
            message: '退出成功',
        })
        localStorage.removeItem('token')
        localStorage.removeItem('userinfo')
        router.push('/Login')
    }).catch(() => {

    })
}
// components
let screenWidth = ref(null)
let Detil = ref(null)//设置ref
let Holp = ref(null)//设置ref
// 当页面刚刷新时
onMounted(() => {
    localStorage.setItem('path', '/')
    screenWidth.value = window?.innerWidth;
    if (screenWidth.value < 400) {
        router.push('/IndexMove')
    } else {
        router.push(localStorage.getItem('path'))
    }
    // 这个是获取屏幕的宽度
    window.addEventListener('resize', () => {
        screenWidth.value = window?.innerWidth;
        if (screenWidth.value < 400) {
            router.push('/IndexMove')
        } else {
            router.push(localStorage.getItem('path'))
        }
    })
})
//点击修改密码
const xiugaiPass = () => {
    Detil.value.visibles = true
}
// 点击使用帮助
const useHolp = () => {
    Holp.value.visibles = true
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 14.4) * 1vw;
}

.userInfo {
    color: #32bbea;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    cursor: pointer;
    text-align: center;
}

.ChangePassword {
    width: 100%;
    height: pxfn(30);
    line-height: pxfn(30);
    text-align: center;
    font-size: pxfn(10);
    color: #2c2c2c;
    cursor: pointer;
    margin: pxfn(10) 0;
}

.ChangePassword:hover {
    background-color: #f2f4f7;
    border-radius: pxfn(6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.head {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 pxfn(25);
    border-bottom: pxfn(1) solid #edf3fa;

    .avart {
        width: pxfn(26);
        height: pxfn(26);
        border-radius: pxfn(16);
        cursor: pointer;
    }

    .title {
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #1d2129;
        margin-left: pxfn(10);
    }

    .login {
        width: pxfn(28);
        height: pxfn(24);
    }
}

// 1vw等于14.4px
//16px=多少vw
.mine {
    padding: pxfn(16);
    background-color: #deecfa !important;

}

::v-deep .el-header {
    background-color: #fff !important;
}

.fal {
    height: 100vh;
    width: 100vw;
    background-color: #edf3fa;
}

.el-container {
    height: 100vh;

    .el-main {
        background-color: rgb(253, 253, 253);
    }

    .el-header {
        background-color: rgb(222, 239, 240);
    }
}

::v-deep .el-menu {
    border-right: none;
}

.el-aside {
    background-color: #fff;
    width: var(--el-aside-width, 0);
    --el-aside-width: pxfn(150) !important;
}

::v-deep .el-menu-vertical-demo {
    background-color: #fff !important;
    --el-menu-text-color: #000 !important;
    height: 25px !important;
}

::v-deep .el-menu-item {
    height: pxfn(30) !important;
    // background-color: pink;
    border-radius: pxfn(8);
    width: 80%;
    margin: pxfn(5) auto;
    font-size: pxfn(10);
}

::v-deep .is-active {
    // height: 25px !important;
    // margin: 10px auto;

    background-color: #32bbea;
    color: #fff;
    font-weight: 600;
}

::v-deep .el-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

::v-deep .el-menu-item:hover {
    background-color: #32bbea;
    // background-color: transparent;
    color: #fff;
    font-weight: 600;
}

::v-deep .el-menu {
    --el-menu-level: -1 !important;
}
</style>